<template>
  <div>
    <!-- 接口加载完成 -->
    <div v-if="loadingFinish">
      <!-- 学校已开通 -->
      <div v-if="schoolIsOpen">
        <div class="headerTitle">
          <div class="container">
            <div class="systemTitle">生涯测评系统</div>
            <div class="schoolName">{{ schoolName }}</div>
            <div class="loginBtnGroup">
              <div class="studentBtn button" @click="handleStudentLogin">学生登录</div>
              <div class="teacherBtn button" @click="handleShowToast">教职人员登录</div>
            </div>
          </div>
        </div>
        <div class="contentDiv">
          <div class="container introContentArea">
            <div class="singleIntro">
              <div class="leftImage">
                <img src="../assets/login/home_icon_xingaokao.png" alt="">
              </div>
              <div class="rightContent">
                <div class="title">新高考</div>
                <div class="intro">建立中国特色现代教育考试招生制度，形成分类考试、综合评价、多元录取的考试招生模式，健全促进公平、科学选才、监督有力的体制机制，构建衔接沟通各级各类教育、认可多种学习成果的终身学习“立交桥”。</div>
              </div>
            </div>
            <div class="singleIntro">
              <div class="leftImage">
                <img src="../assets/login/home_icon_wuweipingce.png" alt="">
              </div>
              <div class="rightContent">
                <div class="title">五维测评</div>
                <div class="intro">
                  <div>采用国际通用测评综合国情本地化</div>
                  <div>为中国高中学生量身开发</div>
                  <div>五个维度测评结果综合考虑评，结论更准确</div>
                  <div>深度认知自我，确定升学目标</div>
                </div>
              </div>
            </div>
            <div class="singleIntro">
              <div class="leftImage">
                <img src="../assets/login/home_icon_zhuanyezhiye.png" alt="">
              </div>
              <div class="rightContent">
                <div class="title">专业职业</div>
                <div class="intro">
                  <div>帮助学生深度认识职业，树立发展目标，反溯专业，最终框定最合理选科选课方案</div>
                  <div>早知晓，早规划，成功人生，从高中开始先人一步。</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="footerDiv">生涯测评系统由 <span>武汉升学在线股份有限公司</span> 提供技术支持</div>
      </div>
      <!-- 学校未开通 -->
      <div v-else>
        <div class="loadingIsOpen">
          <div class="isOpenImage"><img src="../assets/empty_pic_404.png" alt=""></div>
          <div class="isOpenDescribe">你访问的页面不正确</div>
        </div>
      </div>
    </div>
    <!-- 接口未加载完成 -->
    <div v-else>
      <div class="notFinishLoad">
        <img src="../assets/loading_gif.gif" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import ls from 'store2'
import axios from '~/plugins/axios'
import { Message, Loading } from 'element-ui';
export default {
  data() {
    return {
      schoolName: '',
      schoolIsOpen: false,
      loadingFinish: false
    }
  },
  created() {
    ls.remove('studentMsg')
    ls.remove('resultPar')
    ls.remove('tokens')
    ls.remove('workValuesResult')
    ls.remove('growupResult')
    ls.remove('zhinengResult')
    ls.remove('interestResult')
    ls.remove('mbtiResult')
    ls.remove('schoolId')
    ls.remove('schoolName')
  },
  mounted() {
    const schoolId = this.$route.query.schoolId
    ls.set('schoolId', schoolId)
    this.getSchoolMsg()
  },
  methods: {
    handleStudentLogin() {
      if (ls.get('schoolName')) {
        this.$router.push({
          path: '../studentLogin'
        })
      } else {
        Message.error('网络故障')
      }
    },
    handleShowToast() {
      Message.info('功能暂未开放~~');
    },
    getSchoolMsg() {
      axios.get('/school').then(res => {
        this.schoolIsOpen = true
        this.schoolName = res.name
        ls.set('schoolName', this.schoolName)
      }).catch(err => {
        this.schoolIsOpen = false
      }).finally(() => {
        this.loadingFinish = true
      })
    }
  }
}
</script>

<style lang="less">
  @importColor: #FF8A00;
  .el-loading-spinner .el-loading-text, .el-loading-spinner i {
    color: @importColor;
  }
  .el-loading-spinner .path {
    stroke: @importColor;
  }
</style>

<style lang="less" scoped>
  .headerTitle {
    width: 100%;
    height: 728px;
    padding-top: 237px;
    background: url('https://static.shengxue985.com/high-school-career-pc-system/images/home_bg.png') no-repeat center center;
    background-size: 100% 100%;
    .systemTitle {
      color: #263238;
      font-size: 60px;
      line-height: 90px;
      font-weight: bold;
      margin-bottom: 18px;
    }
    .schoolName {
      color: #263238;
      font-size: 26px;
      line-height: 35px;
      margin-bottom: 77px;
    }
    .loginBtnGroup {
      .button {
        display: inline-block;
        width: 174px;
        height: 59px;
        border-radius: 2px;
        color: #fff;
        font-size: 18px;
        line-height: 59px;
        text-align: center;
        cursor: pointer;
      }
      .studentBtn {
        background: #FF8A00;
        box-shadow:0px 2px 6px 0px rgba(255,138,0,0.3);
        margin-right: 8px;
      }
      .teacherBtn {
        background: #263238;
        box-shadow:0px 2px 6px 0px rgba(40,39,39,0.3);
      }
    }
  }
  .contentDiv {
    width: 100%;
    padding: 48px 0 72px;
    .introContentArea {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .singleIntro {
        display: flex;
        justify-content: flex-start;
        .leftImage {
          width: 112px;
          height: 112px;
          margin-right: 24px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .rightContent {
          width: 227px;
          .title {
            color: #263238;
            font-size: 22px;
            line-height: 29px;
            margin-bottom: 14px;
          }
          .content {
            color: #6F7880;
            font-size: 14px;
            line-height: 19px;
          }
        }
      }
    }
  }
  .footerDiv {
    width: 100%;
    height: 56px;
    line-height: 56px;
    background: #272E33;
    text-align: center;
    color: #999;
    font-size: 12px;
    span {
      color: #FF8A00;
    }
  }

  .notFinishLoad {
    margin: 300px auto;
    width: 100px;
    height: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .loadingIsOpen {
    margin: 300px auto;
    width: 300px;
    text-align: center;
    .isOpenImage {
      width: 234px;
      height: 152px;
      margin: 0 auto 11px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .isOpenDescribe {
      color: #6F7880;
      font-size: 14px;
      line-height: 19px;
    }
  }

</style>